import Taro, {Component, Config} from "@tarojs/taro";
import {View, Image} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getAvatar, getRuntime, subtime} from '../../utils/common'
import './index.less'
import './team_member.less'

// 下级成员
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    id: null,
    totalCount: 0,
    items: {},
    fatherUser: {},
    userCount: Array(4).fill(0)
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的团队' })
    let id = parseInt(this.$router.params.id)
    if(!id){
      getRuntime().navigateBack(); return
    }
    this.setState({
      id,
      fatherUser: getRuntime().getStorage('fatherUser')
    })
    this.getUserShareUsers(id)
  }

  // 获取推广用户列表
  getUserShareUsers(id: number) {
    let { userCount } = this.state
    let { userStore } = this.props.stores
    userStore.getUserShareUsers({
      formUserId: id,
      pageIndex: 1,
      pageSize: 200,
      callback: res => {
        // 统计数量
        res&&res.items.map((item) => {
          let pos = parseInt(item.agencyLevel)
          userCount.splice(pos, userCount[pos]+1 )
        })
        this.setState({
          totalCount: toJS(res.totalCount),
          items: toJS(res.items),
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  config: Config = {
    navigationBarTitleText: '下级成员'
  }

  render() {
    let { totalCount,fatherUser,userCount }= this.state
    return (
      <View className='my-my_team_member'>
        <View className='list-20-item'>
          <Image src={getAvatar(fatherUser.avatar)} className='img' />
          <View className='info'>
            <View className='list-title'>{fatherUser.name}</View>
            <View className='tel'>{fatherUser.phoneNumber}</View>
            <View className='list-info'>
              成为代理商时间：{subtime(fatherUser.creationTime)}
            </View>
          </View>
          <View className='r'>共{totalCount}个成员</View>
        </View>
        <View className='interval' />

        <View className='item-member'>
          <View className='list-title'>普通会员</View>
          <View className='list-desc'>{userCount[0]}个</View>
        </View>

        <View className='item-member'>
          <View className='list-title'>VIP会员</View>
          <View className='list-desc'>{userCount[1]}个</View>
        </View>

        <View className='item-member'>
          <View className='list-title'>代理商</View>
          <View className='list-desc'>{userCount[2]}个</View>
        </View>

        <View className='item-member'>
          <View className='list-title'>合伙人</View>
          <View className='list-desc'>{userCount[3]}个</View>
        </View>
      </View>
    )
  }
}

export default Company
